<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :wrapper-col="wrapperCol">
        <a-row :gutter="48">
          <a-col :md="4" :sm="24">
            <a-form-item label="户主姓名">
              <a-input
                v-model="queryParam.householderName"
                style="width: 100px; "
                placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="家庭成员姓名">
              <a-input
                v-model="queryParam.memberName"
                style="width: 100px;"
                placeholder=""/>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="5" :sm="24">
              <a-form-item label="家庭成员姓名">
                <a-select v-model="queryParam.memberName" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
          <a-col :md="6" :sm="24">
            <a-form-item label="家庭成员人数">
              <a-input-group compact>
                <a-input-number
                  v-model="queryParam.minMemberCount"
                  style="width: 45px; text-align: center"
                  placeholder=""
                />
                <span class="span-center">~</span>
                <a-input-number
                  v-model="queryParam.maxMemberCount"
                  class="site-input-right"
                  style="width: 45px; text-align: center"
                  placeholder=""
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="房屋总面积">
              <a-input-group compact>
                <a-input-number
                  v-model="queryParam.minTotalArea"
                  style="width: 45px; text-align: center"
                />
                <span class="span-center">~</span>
                <a-input-number
                  v-model="queryParam.maxTotalArea"
                  class="site-input-right"
                  style="width: 45px; text-align: center"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button v-if="selectedRowKeys.length > 0" type="danger" @click="()=>delVisible=true">{{ $t('common.batchDel') }}</a-button>
      <a-button style="float:right;z-index:99" type="primary" icon="plus" @click="handleAdd">{{ $t('common.add') }}</a-button>
    </div>
    <a-modal
      title="批量删除确认"
      :visible="delVisible"
      :confirm-loading="confirmLoading"
      @ok="delBatch"
      @cancel="()=>delVisible=false"
    >
      <p> 您确定要删除所选账户的所有数据?</p>
    </a-modal>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record)=>record.id"
      :columns="columns"
      :data="loadData"
      :alert="false"
      :rowSelection="rowSelection"
      showPagination="true"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ (pageNum-1) * pageSize + (index + 1) }}
      </span>
      <span slot="status" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span>
      <span slot="description" slot-scope="text">
        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
      </span>

      <span slot="action" slot-scope="text, record">
        <template>

          <a @click="edit(record.id)">编辑</a>
          <a-divider type="vertical" />
          <a @click="look(record.id)">查看</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="是否确认删除所有数据?"
            :ok-text="$t('common.yes')"
            :cancel-text="$t('common.no')"
            @confirm="del(record.id)"
          >
            <a href="#">{{ $t('common.delete') }}</a>
          </a-popconfirm>
        </template>
      </span>
    </s-table>

    <a-modal
      :title="action===1?'权属户新增':action===2?'权属户详情':'权属户查看'"
      width="80%"
      height="60%"
      :visible="visible"
      @cancel="visible=false"
      :destroyOnClose="true"
      :footer="null"
    >
      <house-detail
        :type="1"
        :action="action"
        :currentId="currentId"
        @shadown="shadown"
      />
    </a-modal>
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { pageApi, deleteByIdsApi } from '@/api/house'
import HouseDetail from './detail.vue'
const columns = [
  {
    title: '序号',
    align: 'center',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '户主姓名',
    align: 'center',
    dataIndex: 'householderName'
  },
  {
    title: '户编号',
    align: 'center',
    dataIndex: 'houseNo'
  },
  {
    title: '房屋地址',
    align: 'center',
    dataIndex: 'houseAddress'
  },
  {
    title: '家庭成员总数',
    align: 'center',
    dataIndex: 'totalMembers'
  },
  {
    title: '房屋总面积',
    align: 'center',
    dataIndex: 'houseArea'
  },

  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'createTime'
    // sorter: true
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'default',
    text: '关闭'
  },
  1: {
    status: 'processing',
    text: '运行中'
  },
  2: {
    status: 'success',
    text: '已上线'
  },
  3: {
    status: 'error',
    text: '异常'
  }
}

export default {
  name: 'HouseList',
  components: {
    STable,
    Ellipsis,
    HouseDetail
  },
  data () {
    this.columns = columns
    return {
      pagination: {
        defaultPageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20'],
        showTotal: total => '共100条'
      },
      action: 1,
      labelCol: { style: { width: '100px' }, span: 13 },
      wrapperCol: { span: 14 },
      // create model
      visible: false,
      delVisible: false,
      confirmLoading: false,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: async parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return pageApi(requestParameters)
        .then((res) => {
          const { data } = res
          return data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      pageNum: 1,
      pageSize: 10,
      currentId: 0
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
 async created () {
    // deleteByIdsApi('13')
    // this.selectPage()
  },
  computed: {
    rowSelection () {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {

    handleAdd () {
      this.currentId = 0
      this.action = 1
      this.visible = true
    },
    async delBatch () {
      await deleteByIdsApi(this.selectedRowKeys.join(','))
      this.$message.success('批量删除成功')
      this.delVisible = false
      this.$nextTick(() => {
        this.selectedRowKeys = []

        this.rowSelection.selectedRowKeys = []
        this.rowSelection.selectedRows = []
        this.$refs.table.loadData()
      })
    },
    handleOk () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          if (values.id > 0) {
            // 修改 e.g.
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve()
              }, 1000)
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()
              this.$message.info('修改成功')
            })
          } else {
            // 新增
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve()
              }, 1000)
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.info('新增成功')
            })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    async del (id) {
      await deleteByIdsApi(id)
      this.$message.success('删除成功')
      this.$refs.table.loadData()
    },
    edit (id) {
      this.currentId = id
      this.action = 2
      this.visible = true
    },
    look (id) {
      this.currentId = id
      this.action = 3
      this.visible = true
    },
    shadown () {
      this.visible = false
      this.$refs.table.loadData()
    }

  }
}
</script>
<style lang="less" scoped>

::v-deep  .table-page-search-wrapper .ant-input-number-handler-wrap {
    display: none;
}
.span-center{
  text-align: center;
  font-size: 14px;
  line-height: 32px;
  margin-left:5px;
  padding-right: 5px;
}
.table-operator{
  height: 40px;
  margin: 5px auto;
}

</style>
